<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- style -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-pc-ui@4/lib/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table@4/lib/style.css">
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <!-- table -->
    <script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
    <script src="https://cdn.jsdelivr.net/npm/vxe-pc-ui@4"></script>
    <script src="https://cdn.jsdelivr.net/npm/vxe-table@4"></script>
    <style>
        html, body, #app {
            height: 98%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <vxe-layout-container>
        <vxe-layout-aside class="page-aside" :width="240">
            <AsideView />
        </vxe-layout-aside>
        <vxe-layout-container vertical>
            <vxe-layout-header>
                <HeaderView />
                <TopView />
            </vxe-layout-header>
            <vxe-layout-body :key="123" class="page-body">
                <RouterView />
            </vxe-layout-body>
            <vxe-layout-footer>
                <div class="page-footer">
                    <span>版权所有 ©<vxe-link href="https://vxeui.com/" target="_blank">vxe</vxe-link> 2018-</span>
                </div>
            </vxe-layout-footer>
        </vxe-layout-container>
    </vxe-layout-container>

    </div>
</div>
<script>
    (function () {
        var App = {
            data() {
                return {
                    // form
                    formData: {
                        appId: '',
                        thirdId: null
                    },
                    formRules: {
                        appId: [
                            { required: true, message: 'app_id为必填项' }
                        ],
                        appKey: [
                            { required: true, message: 'app_key为必填项' }
                        ],
                        thirdId: [
                            { required: true, message: '第三方厂商平台id为必填项' },
                            { type: 'number', message: '请输入有效数字' }
                        ]
                    },
                    // table
                    tableData: [],
                    loading: false,
                    dialogVisible: false,  // 控制模态框显示
                    currentRow: {},         // 当前编辑/新增的数据
                    currentPage: 1,   // 新增：当前页码
                    pageSize: 10,     // 新增：每页数量
                    total: 0          // 新增：总记录数
                }
            },
            mounted() {
                this.submitEvent();  // 页面加载后自动查询
            },
            methods: {
                submitEvent() {
                    this.loading = true;
                    fetch(`/cfsUserAppConfig/list?current=${this.currentPage}&size=${this.pageSize}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(this.formData)
                    })
                        .then(response => response.json())
                        .then(data => {
                            if (data.code === 200) {
                                this.tableData = data.data.records;
                                this.total = data.data.total;  // 同步总记录数
                            }
                        })
                        .catch(error => {
                            console.error('查询失败:', error);
                        })
                        .finally(() => {
                            this.loading = false;
                        });
                },
                // 新增分页事件处理
                handlePageChange(page) {
                    this.currentPage = page;
                    this.submitEvent();
                },
                handleSizeChange(size) {
                    this.pageSize = size;
                    this.currentPage = 1;  // 切换每页数量时重置为第一页
                    this.submitEvent();
                },
                resetEvent() {
                    this.formData = {
                        appId: '',
                        thirdId: null
                    };
                    this.submitEvent();
                },
                // 新增按钮点击事件
                handleAdd() {
                    this.currentRow = {};  // 清空编辑数据
                    this.dialogVisible = true;
                },
                // 编辑按钮点击事件
                handleEdit(row) {
                    this.currentRow = { ...row };  // 深拷贝当前行数据
                    this.dialogVisible = true;
                },
                // 删除按钮点击事件
                handleDelete(id) {
                    if (!confirm('确定要删除这条记录吗？')) return;
                    fetch(`/cfsUserAppConfig/delete/${id}`, { method: 'DELETE' })
                        .then(res => res.json())
                        .then(data => {
                            if (data.code === 200) {
                                this.submitEvent();  // 删除成功后刷新列表
                            }
                        });
                },
                // 保存（新增/编辑）事件
                handleSave() {
                    const url = this.currentRow.id ? `/cfsUserAppConfig/update` : `/cfsUserAppConfig/save`;
                    const method = this.currentRow.id ? 'PUT' : 'POST';

                    fetch(url, {
                        method,
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify(this.currentRow)
                    })
                        .then(res => res.json())
                        .then(data => {
                            if (data.code === 200) {
                                this.dialogVisible = false;
                                this.submitEvent();  // 保存成功后刷新列表
                            }
                        });
                }
            }
        }
        // 保持原有挂载逻辑
        Vue.createApp(App).use(VxeUI).use(VxeUITable).mount('#app')
    })()
</script>
</body>
</html>